<template>
  <div
    ref="videoRef"
    id="divPlugin"
    class="plugin"
    style="width: 1000px; height: 600px"
  ></div>
</template>

<script setup>
import { ref, onMounted } from "vue";

const videoRef = ref(null);

const loginInfo = ref({
  szIP: "192.168.1.64",
  szPort: 80,
  szUsername: "admin",
  szPassword: "drx123456",
});

// 初始化插件
const initPlugin = () => {
  window.I_InitPlugin({
    bEmbed: true,
    bWndFull: true,
    iWndowType: 1,
    cbInitPluginComplete: () => {
      window
        .I_InsertOBJECTPlugin("divPlugin")
        .then(checkPluginVersion, () =>
          console.log("请双击开发包目录里的 HCWebSDKPlugin.exe 安装！")
        );
    },
  });
};

// 检查插件版本
const checkPluginVersion = () => {
  WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
    if (bFlag) {
      console.log(
        "检测到新插件版本，双击开发包目录里的 HCWebSDKPlugin.exe 升级！"
      );
    }
    login();
  });
};

// 登录
const login = async () => {
  const { szIP, szPort, szUsername, szPassword } = loginInfo.value;
  window.I_Login(szIP, 1, szPort, szUsername, szPassword, {
    success: (xmlDoc) => {
      console.log("登录成功", xmlDoc);
      startView();
    },
    error: (oError) => console.log("登录失败", oError),
  });
};

// 开始预览
const startView = () => {
  const { szIP } = loginInfo.value;
  window.I_StartRealPlay(szIP, {
    success: () => console.log("预览成功"),
    error: (oError) => console.log("预览失败", oError),
  });
};

// 在组件挂载后初始化插件
onMounted(() => {
  initPlugin();
});
</script>

<style scoped>
.plugin {
  width: 1000px;
  height: 600px;
}
</style>
